<template>
	<view class="package ">
		<view class="space-between datas">
			<uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
				@change="change" />
			<view @click="popupOpen()">筛选</view>
		</view>
		<view v-if="amount_name" class="wearn" @click="del()">
			<text>{{amount_name}}</text>
			<uni-icons type="closeempty" color="#666" size="20" style="margin-left: 10rpx"></uni-icons>
		</view>
	</view>
	<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
		:style="{ height: pageHeight + 'px' }">
		<view class="package" style="margin-top:0px;" v-if="wareAll.length>0">
			<view class="space-between detail" v-for="item in wareAll" :key="item.id">
				<view>
					<view>{{item.memo}}</view>
					<view style="font-size: 26rpx;margin-top:10rpx;">{{item.createtime}}</view>
				</view>
				<view>{{item.money}}公斤</view>
			</view>
		</view>
		<Popu v-else :pageHeight="pageHeight" text="暂无变动明细"></Popu>
	</scroll-view>
	<!-- 地区筛选 -->
	<uni-popup ref="popup" type="center">
		<view class="package" style="width: 670rpx;">
			<view v-if="userInfo.physical.length>0" class="flexCenter">
				<view v-for="item in userInfo.physical" :key="item.id"
					:style="{background:amount_id==item.id?'#1D8DFF':'',color:amount_id==item.id?'#fff':''}"
					@click="district(item.id,item.region_name)">
					{{item.region_name}}
				</view>
			</view>
			<Popu v-else pageHeight="10vh" text="暂无变动明细"></Popu>
			<view class="space-between text">
				<text @click="cancel()">取消</text>
				<text @click="submit()">确定</text>
			</view>
		</view>
	</uni-popup>
</template>
<script setup lang="ts">
	import Popu from '@c/earthPushing/common/popu.vue';
	import { ref } from 'vue';
	import { format, subDays } from 'date-fns';
	import { getAmountRegionLog, getAmountLog } from '@/gql/warehouse';
	import { onLoad } from '@dcloudio/uni-app';
	import { showLoading } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	import { getDriverID } from '@/stores/driverID';
	import { useUserStore } from '@/stores/user';
	const userInfo = useUserStore();
	const driver_id = getDriverID();
	const amount_id = ref()
	const amount_name = ref()
	let now = new Date();
	let end = format(now, 'yyyy-MM-dd');
	let daysAgo = subDays(now, 6);
	let start = format(daysAgo, 'yyyy-MM-dd');
	const range = ref([start, end]);
	const pageHeight = ref();
	const wareAll = ref([])
	const lastPage = ref(1);
	const currentPage = ref(1);
	const popup = ref(null)
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = res.windowHeight - 145;
		},
	});
	onLoad((pearm) => {
		amount_id.value = Number(pearm.amount_id)
		amount_name.value = pearm.name
		userInfo.inventory(driver_id);
		userInfo.Physicalamounte(driver_id);
		wareList()
	})
	/**
	 * 获取仓库信息
	 * @param {Number} page  获取仓库列表数据
	 * @param {String} keywords  搜索信息
	 */
	function wareList() {
		showLoading()
		const payload = {
			query: getAmountRegionLog,
			variables: {
				page: currentPage.value,
				driver_id,
				start,
				end,
				amount_id: amount_id.value
			},
		};
		toPublish(
			'ql/driver/getAmountRegionLog',
			payload,
			(obj : any) => {
				const { getAmountRegionLog } = obj.data;
				wareAll.value = [...wareAll.value, ...getAmountRegionLog.list];
				lastPage.value = getAmountRegionLog.lastpage;
			}
		);
	}
	function wareInfor() {
		showLoading()
		const payload = {
			query: getAmountLog,
			variables: {
				page: currentPage.value,
				driver_id,
				start,
				end,
			},
		};
		toPublish(
			'ql/driver/getAmountLog',
			payload,
			(obj : any) => {
				const { getAmountLog } = obj.data;
				wareAll.value = [...wareAll.value, ...getAmountLog.list];
				lastPage.value = getAmountLog.lastpage;
			}
		);
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
		if (currentPage.value < lastPage.value) {
			currentPage.value++;
			if (amount_id.value) {
				wareList();
			} else {
				wareInfor()
			}
		}
	}
	/**
	  * 时间筛选
	  * @param sta  开始时间
	  * @param en  结束时间
	  */
	function change([sta, en]) {
		start = sta;
		end = en;
		wareAll.value = []
		currentPage.value = 1
		wareList();
	}
	function popupOpen() {
		popup.value.open()
	}
	function district(id : number, name : string) {
		amount_id.value = id
		amount_name.value = name
	}
	function del() {
		amount_id.value = ''
		amount_name.value = ''
		wareAll.value = []
		currentPage.value = 1
		wareInfor();
	}
	function cancel() {
		popup.value.close()
		del()
	}
	function submit() {
		popup.value.close()
		wareAll.value = []
		currentPage.value = 1
		wareList();
	}
	function renew() {
		wareAll.value = []
		currentPage.value = 0
		loadMore()
	}
	defineExpose({ renew });
</script>

<style scoped lang="less">
	.flexCenter {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		view {
			padding: 8rpx 20rpx 9rpx;
			box-sizing: border-box;
			border: 1px solid #1D8DFF;
			border-radius: 10rpx;
			text-align: center;
			min-width: 150rpx;
		}
	}

	.text {
		width: 80%;
		margin: 25rpx auto 15rpx;

		text {
			width: 222rpx;
			height: 71rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 71rpx;
		}

		text:nth-of-type(1) {
			border: 1px solid #1D8DFF;
			color: #1D8DFF;
			box-sizing: border-box;
		}

		text:nth-of-type(2) {
			background: #1D8DFF;
			color: #fff;
		}


	}

	.wearn {
		width: 200rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border: 1px solid #eee;
		border-radius: 30px;
	}

	.detail {
		padding: 10rpx 0px;
		box-sizing: border-box;
	}
</style>
<style>
	.datas>>>.uni-date__x-input {
		font-size: 30rpx !important;
	}

	.datas>>>.uni-date-x {
		font-size: 30rpx !important;
	}

	.datas>>>.uni-icons {
		font-size: 48rpx !important;
	}
</style>